<template>
  <view id="box">
    <u-toast ref="uToast" />
    <!-- 个人信息区域 -->
    <view class="userInfo" @click="login">
      <u-image :src="userInfo.avatarUrl" shape="circle" width="80px" height="80px"></u-image>
      <p v-if="!loginCheck">未登录</p>
      <p v-else>{{userInfo.nickName}}</p>
      <p class="touchLogin" v-if="!loginCheck"><span>点我登录</span></p>
      <p class="touchLogin" :class="logtag" v-else><span>已登录</span></p>
    </view>
    <!-- 分类管理区域 -->
    <view class="grid">
      <u-grid :border="false" col=3>
        <u-grid-item v-for="(item,index) in baseList" :key="index" @click="click(item)">
          <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="30" :color="item.color"></u-icon>
          <text class="grid-text">{{item.title}}</text>
        </u-grid-item>
      </u-grid>
      <u-toast ref="uToast" />
    </view>
    <!-- 单元格区 -->
    <view class="cell">
      <u-cell-group>
        <u-cell icon="setting" title="扫一扫" @click="scan" isLink arrow-direction="right"></u-cell>
        <u-cell icon="edit-pen" title="建议与意见" url="/pages/opinion/opinion" isLink arrow-direction="right"></u-cell>
        <u-cell icon="kefu-ermai" title="客服中心" @click="notOpen"></u-cell>
        <u-cell icon="trash" title="清除缓存" @click="clearCache" isLink arrowDirection="right"></u-cell>
        <u-cell icon="integral" title="超级管理员模式" @click="notOpen"></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        logtag: '',
        baseList: [{
            name: 'grid',
            title: '我的发布',
            color: "#09f"
          },
          {
            name: 'star-fill',
            title: '我的收藏',
            color: "#09f"
          },
          {
            name: 'plus-circle-fill',
            title: '发布信息',
            color: "#09f"
          }
        ],
        loginCheck: false,
        userInfo: {
          openid: '',
          nickName: '',
          avatarUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8764a2d0-4a21-41de-b6cd-10591b362897/fbdcfdb6-0e3a-4a03-bee9-298c6f6af56d.jpeg'
        }
      }
    },
    // 页面加载时
    async onLoad() {
      // 检查本地缓存是否有openid
      uni.getStorage({
        key: 'myopenid',
        success: (res) => {
          // console.log('成功了');
          this.$store.commit('setopenid', res.data)
        },
        fail: () => {
          // console.log("失败了，要去调接口了");
          this.getOpenid()
        }
      })
      // 检查本地缓存是否有用户信息，有就取出并完成登陆
      uni.getStorage({
        key: "userInfo",
        success: (res) => {
          this.$store.commit('setNickName', res.data.nickName)
          this.$store.commit('setAvatarUrl', res.data.avatarUrl)
          this.loginCheck = true
          this.logtag = ".iflogin"
          this.userInfo = res.data
          this.$set(this.userInfo, 'openid', this.$store.state.openid)
        },
        fail: (res) => {
          // console.log("还未登陆");
        }
      })
    },
    methods: {
      // 获取openid
      getOpenid() {
        uni.login({
          provider: "weixin",
          success: (res) => {
            var code = res.code
            uniCloud.callFunction({
              name: 'login',
              data: {
                code: code
              },
              success: (res) => {
                this.$store.commit('setopenid', res.result)
                uni.setStorage({
                  key: 'myopenid',
                  data: res.result,
                })
              }
            })
          }
        })
      },
      // 点击了内容相关的按钮
      click(e) {
        if (!this.loginCheck) {
          this.$refs.uToast.error("尚未登录")
        } else {
          if (e.title == "我的发布") {
            uni.navigateTo({
              url: "/pages/myrelease/myrelease"
            })
          } else if (e.title == "发布信息") {
            uni.navigateTo({
              url: "/pages/release/release"
            })
          } else if (e.title == "我的收藏") {
            uni.navigateTo({
              url: "/pages/mycollection/mycollection"
            })
          }
        }
      },
      // 点击登录后获取用户的微信头像和昵称,并存入缓存
      login() {
        if (this.loginCheck) {
          return
        } else {
          uni.getUserProfile({
            desc: "获取信息",
            success: (res) => {
              uni.setStorage({
                key: "userInfo",
                data: {
                  nickName: res.userInfo.nickName,
                  avatarUrl: res.userInfo.avatarUrl
                }
              })
              this.$store.commit('setNickName', res.userInfo.nickName)
              this.$store.commit('setAvatarUrl', res.userInfo.avatarUrl)
              uniCloud.callFunction({
                name: "updateuserinfo",
                data: {
                  openid: this.$store.state.openid,
                  nickName: res.userInfo.nickName,
                  avatarUrl: res.userInfo.avatarUrl
                },
                success: (res) => {
                  this.userInfo = res.result
                  this.loginCheck = true
                  this.logtag = ".iflogin"
                }
              })
            }
          })
        }
      },
      // 清除缓存
      clearCache() {
        uni.clearStorage();
        this.$refs.uToast.success('清除成功')
        setTimeout(() => {
          uni.redirectTo({
            url: "/pages/my/my"
          })
        }, 1500)
      },
      // 扫一扫
      scan() {
        uni.scanCode({
          success: (res) => {
            uni.navigateTo({
              url: "/pages/webView/webView?url=" + res.result
            })
          }
        })
      },
      // 功能暂未开放
      notOpen() {
        this.$refs.uToast.error('功能暂未开放')
      }
    }
  }
</script>

<style lang="scss">
  #box {
    overflow: hidden;
    width: 750rpx;
    height: auto;
  }

  .userInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    width: 710rpx;
    height: 180px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 5px #ccc;
    font-family: 'Microsoft YaHei';
    font-size: 14px;
    background-color: #fff;

    p {
      margin: 10px 0 0 0;
    }

    .touchLogin {
      width: 150rpx;
      height: 30px;
      text-align: center;
      line-height: 25px;
      background-color: #aaa;
      border-radius: 20px;
      color: #fff;

      span {
        font-size: 12px;
      }
    }

    .iflogin {
      background-color: #09f;
    }
  }

  .grid {
    margin: 10px;
    padding-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 1px 5px #ccc;
    background-color: #fff;
  }

  .cell {
    width: 710rpx;
    background-color: #fff;
    margin: 0 auto 10px;
    border-radius: 10px;
    box-shadow: 0 1px 5px #ccc;
  }
</style>
